<template>
    <div class="edit-section" v-if="question">
      <edit-i-paragraph v-if="question.type === 'paragraph'" :question="question" v-on:edit="edit"></edit-i-paragraph>
      <edit-i-text v-else-if="question.type === 'input'" :question="question" v-on:edit="edit"></edit-i-text>
      <edit-i-checkbox v-else-if="question.type === 'checkbox'" :page="page" :question="question" :tactics="tactics" v-on:newRefSection="newRefSection" v-on:edit="edit"></edit-i-checkbox>
      <edit-i-radio v-else-if="question.type === 'radio'" :page="page" :question="question" :tactics="tactics" v-on:newRefSection="newRefSection" v-on:edit="edit"></edit-i-radio>
      <edit-i-datetime v-else-if="question.type === 'datetime'" :question="question" v-on:edit="edit"></edit-i-datetime>
      <edit-i-switch v-else-if="question.type === 'switch'" :question="question" v-on:edit="edit"></edit-i-switch>
      <edit-i-image v-else-if="question.type === 'image'" :question="question" v-on:edit="edit"></edit-i-image>
      <edit-i-table v-else-if="question.type === 'table'" :question="question" :tactics="tactics" v-on:edit="edit"></edit-i-table>
    </div>
</template>

<script>
    import EditIText from "./iText";
    import EditICheckbox from "./iCheckbox";
    import EditIRadio from "./iRadio";
    import EditIDatetime from "./iDatetime";
    import EditISwitch from "./iSwitch";
    import EditIParagraph from "./iParagraph";
    import EditIImage from "./iImage";
    import EditITable from "./iTable";

    export default {
      components: {
        EditITable,
        EditIImage,
        EditIParagraph,
        EditISwitch,
        EditIDatetime,
        EditIRadio,
        EditICheckbox,
        EditIText },
      name: "qa-edit-controler",
      props:['page','question','tactics'],
      created(){
        console.log(this.tactics)
      },
      methods:{
        newRefSection(params){
          this.$emit('newRefSection',params)
        },
        edit(payload){
          this.$emit('update',payload)
        }
      }
    }
</script>

<style lang="scss">
  .edit-section{
    margin:4px;
    position:relative;
    .btn-icon{
      display: inline-flex;
      margin: 6px 3px;
      cursor: pointer;
      opacity: 0.6;
      &:hover{
        opacity: 1;
      }
    }
    .btn-icon-mini{
      margin-left:10px;
      position: absolute;
      cursor: pointer;
      top:4px;
      opacity: 0.6;
      &:hover{
        opacity: 1;
      }
    }
    .option-container{height: 30px;
      line-height: 24px;
      padding:4px 6px;
      position:relative;
      label{
        box-sizing: border-box;
        display: inline-block;
        min-width: 150px;
        width: calc(100% - 100px);
      }
      .option-control{
        top: 0;
        right: 5px;
        position: absolute;
      }
    }
  }

</style>
